<template>
  <div class="salesAnalysis">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>门店支付金额占比</span>
          </div>
          <div>
            <DiskChart
              class="goods"
              :dataList="loadData2"
              :dataValue="loadDataValue2"
              :totalSales="totalSales2"
              width="100%"
              height="600px"
              v-if="show2"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>门店支付金额</span>
          </div>
          <div>
            <avue-crud
              ref="crud1"
              style="width: 100%"
              :data="loadData1"
              :option="tableOption1"
              :table-loading="loading1"
            ></avue-crud>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>门店销量榜</span>
          </div>
          <div>
            <avue-crud
              ref="crud3"
              style="width: 100%"
              :data="loadData3"
              :option="tableOption3"
              :table-loading="loading1"
            ></avue-crud>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>门店营收榜</span>
          </div>
          <div>
            <avue-crud
              ref="crud4"
              style="width: 100%"
              :data="loadData4"
              :option="tableOption4"
              :table-loading="loading1"
            ></avue-crud>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>储值卡数据</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="view"
          >查看明细></el-button
        >
      </div>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>充值概况</span>
          </div>
          <div>
            <DiskChart
              class="goods"
              :dataList="loadData5"
              :dataValue="loadDataValue5"
              :totalSales="totalSales5"
              width="100%"
              height="400px"
              v-if="show5"
            />
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12">
        <el-card class="box-card" shadow="never" style="margin-left: 8px">
          <div slot="header" class="clearfix">
            <span>消费概况</span>
          </div>
          <div>
            <DiskChart
              class="goods"
              :dataList="loadData6"
              :dataValue="loadDataValue6"
              :totalSales="totalSales6"
              width="100%"
              height="400px"
              v-if="show6"
            />
          </div>
        </el-card>
      </el-col>
    </el-card>

    <el-dialog title="查看明细" :visible.sync="dialogTableVisible" width="90%">
      <el-table :data="gridData" style="height: 600px; overflow-y: auto">
        <el-table-column
          property="shopName"
          label="门店名称"
          align="center"
        ></el-table-column>
        <el-table-column label="充值" align="center">
          <el-table-column
            property="platC"
            label="通用"
            align="center"
          ></el-table-column>
          <el-table-column
            property="mallC"
            label="商超"
            align="center"
          ></el-table-column>
          <el-table-column
            property="launC"
            label="洗衣"
            align="center"
          ></el-table-column>
          <el-table-column
            property="houseC"
            label="家政"
            align="center"
          ></el-table-column>
          <el-table-column
            property="coffeeC"
            label="咖吧"
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="消费" align="center">
          <el-table-column
            property="scoffeeC"
            label="通用"
            align="center"
          ></el-table-column>
          <el-table-column
            property="smallC"
            label="商超"
            align="center"
          ></el-table-column>
          <el-table-column
            property="slaunC"
            label="洗衣"
            align="center"
          ></el-table-column>
          <el-table-column
            property="shouseC"
            label="家政"
            align="center"
          ></el-table-column>
          <el-table-column
            property="splatC"
            label="咖吧"
            align="center"
          ></el-table-column>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="handleEdit(1, scope.row)"
              style="margin-left: 5px"
              >充值明细</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="handleEdit(2, scope.row)"
              style="margin-left: 5px"
            >
              消费明细</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import DiskChart from "@/components/dashboard/DiskChart.vue";
import { tableOption1, tableOption3, tableOption4 } from "./index.config.js";
import {
  dataCenterShopInfo,
  dataStatisticalPayDetail,
  dataStatisticalConsumeDetail,
  dataStatisticalRechargeDetail,
} from "@/api/shop/dataReport/storeData.js";

export default {
  components: {
    DiskChart,
  },
  data() {
    return {
      tableOption1,
      tableOption3,
      tableOption4,
      loadData1: [],
      loadData2: [],

      loadData3: [],
      loadData4: [],
      loadData5: [],
      loadData6: [],
      loading1: false,

      totalSales2: `${0}\n\n总占比`, //总销量.
      totalSales5: `${0}\n\n总销量`, //总销量.
      totalSales6: `${0}\n\n总销量`, //总销量.

      loadDataValue2: [],
      loadDataValue5: [],
      loadDataValue6: [],
      searchForm: {},

      gridData: [],
      dialogTableVisible: false,

      show2: false,
      show5: false,
      show6: false,
    };
  },
  methods: {
    getList(searchForm, page) {
      if (searchForm) {
        console.log(searchForm);
        this.searchForm = searchForm;
      }
      this.loading1 = true;
      this.show2 = false;
      dataCenterShopInfo(Object.assign({}, this.searchForm)).then((val) => {
        let data = val.data.data;
        console.log(data);
        this.loading1 = false;
        if (data.cateIdAmtList[0] != null) {
          //储值
          this.show2 = true;
          this.loadData2 = [];
          this.loadDataValue2 = [];
          data.cateIdAmtList.forEach((item) => {
            this.loadData2.push(item.shopName);
            this.loadDataValue2.push({
              value: item.payAmtAcount,
              name: item.shopName,
            });
          });
          this.totalSales2 = `${data.totalAmt}\n\n总额`;
        } else {
          this.loadData2 = [];
          this.loadDataValue2 = [];
          this.totalSales2 = "";
          this.show2 = false;
        }
        this.loadData1 = data.shopPayList[0] != null ? data.shopPayList : [];
        this.loadData3 = data.salesList[0] != null ? data.salesList : [];
        this.loadData4 = data.revenueList[0] != null ? data.revenueList : [];
      });

      this.show5 = false;
      dataStatisticalRechargeDetail(Object.assign({}, this.searchForm)).then(
        (val) => {
          //充值
          let data = val.data.data;
          console.log("data", data);
          if (data) {
            this.loadData5 = [];
            this.loadDataValue5 = [];
            this.totalSales5 = `${data.total}\n\n总充值`;
            delete data.total;
            for (var k in data) {
              console.log(k);
              this.loadData5.push(this.name(k));
              this.loadDataValue5.push({
                value: data[k],
                name: this.name(k),
              });
            }
            this.show5 = true;
          } else {
            this.show5 = false;
          }
        }
      );

      this.show6 = false;
      dataStatisticalConsumeDetail(Object.assign({}, this.searchForm)).then(
        (val) => {
          //消费
          let data = val.data.data;
          if (data) {
            this.loadData6 = [];
            this.loadDataValue6 = [];
            this.totalSales6 = `${data.total}\n\n总消费`;
            delete data.total;
            for (var k in data) {
              console.log(k);
              this.loadData6.push(this.name(k));
              this.loadDataValue6.push({
                value: data[k],
                name: this.name(k),
              });
            }
            this.show6 = true;
          } else {
            this.show6 = false;
          }
        }
      );
    },
    view() {
      this.dialogTableVisible = true;
      dataStatisticalPayDetail({
        shopId: this.searchForm.shopId,
        beginTime: this.searchForm.beginTime,
        endTime: this.searchForm.endTime,
      }).then((val) => {
        let data = val.data.data;
        this.gridData = data;
      });
    },
    name(item) {
      let obj = "";
      if (item == "launC") {
        obj = "洗衣";
      } else if (item == "mallC") {
        obj = "商超";
      } else if (item == "coffeeC") {
        obj = "咖吧";
      } else if (item == "houseC") {
        obj = "家政";
      } else if (item == "platC") {
        obj = "通用";
      }
      return obj;
    },

    handleEdit(idex, row) {
      switch (idex) {
        case 1:
          break;
        case 2:
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss">
.salesAnalysis {
  .box-card {
    min-height: 500px;
  }
}
</style>